<template>
  <div class="row">
    <div class="col-6 q-pr-sm q-mb-sm">
      <q-select filled v-model="province" :options="provinceOpt" label="省份" :clearable="clearable" :readonly="readonly" />
    </div>
    <div class="col-6 q-mb-sm">
      <q-select filled v-model="city" :options="cityOpt" label="城市" :clearable="clearable" :readonly="readonly" />
    </div>
    <div class="col-6 q-pr-sm">
      <q-select filled v-model="district" :options="cityOpt" label="区县" bottom-slots :clearable="clearable" :readonly="readonly" />
    </div>
    <div class="col-6">
      <q-select filled v-model="street" :options="cityOpt" label="街道乡镇" bottom-slots :clearable="clearable" :readonly="readonly" />
    </div>
  </div>
</template>

<script>
import { defineComponent } from 'vue';

export default defineComponent({
  name: 'regionSelect',
  props: {
    field: {
      type: Object,
      default: () => {}
    }
  },
  data () {
    return {
      data: [],
      province: null,
      city: null,
      district: null,
      street: null,
      canChg: true
    }
  },
  mounted () {
    this.$axios.get('/c2/manager/mSystem/getRegions').then(({ data }) => {
      this.data = data;
    });
  },
  computed: {
    provinceOpt () {
      return this.data.map(v => ({
        value: v.name,
        label: v.name,
        children: v.children
      }));
    },
    cityOpt () {
      return this.province && this.province.children ? this.province.children.map(v => ({
        value: v.name,
        label: v.name,
        children: v.children
      })) : [];
    },
    districtOpt () {
      return this.city && this.city.children ? this.city.children.map(v => ({
        value: v.name,
        label: v.name,
        children: v.children
      })) : [];
    },
    streetOpt () {
      return this.district && this.district.children ? this.district.children.map(v => ({
        value: v.name,
        label: v.name
      })) : [];
    },
    clearable () {
      return this.field.clearable === undefined || this.field.clearable === null ? true : !!this.field.clearable;
    },
    readonly () {
      return !!this.field.readonly;
    },
    address () {
      const adr = [];
      this.province && adr.push(this.province.value);
      this.city && adr.push(this.city.value);
      this.district && adr.push(this.district.value);
      this.street && adr.push(this.street.value);
      return adr.join(',');
    }
  },
  watch: {
    province (val) {
      this.city = null;
      this.canChg = false;
      this.field.value = this.address;
      this.field.province = val ? val.value : '';
    },
    city (val) {
      this.district = null;
      this.canChg = false;
      this.field.value = this.address;
      this.field.city = val ? val.value : '';
    },
    district (val) {
      this.street = null;
      this.canChg = false;
      this.field.value = this.address;
      this.field.district = val ? val.value : '';
    },
    street (val) {
      this.canChg = false;
      this.field.value = this.address;
      this.field.street = val ? val.value : '';
    },
    'field.value' (val) {
      if (this.canChg) {
        const arr = val ? val.split(',') : [];
        if (arr[0]) {
          this.province = { value: arr[0], label: arr[0], children: [] }
        } else {
          this.province = null
        }
        if (arr[1]) {
          this.city = { value: arr[1], label: arr[1], children: [] }
        } else {
          this.city = null
        }
        if (arr[2]) {
          this.district = { value: arr[2], label: arr[2], children: [] }
        } else {
          this.district = null
        }
        if (arr[3]) {
          this.street = { value: arr[3], label: arr[3], children: [] }
        } else {
          this.street = null
        }
      } else {
        this.canChg = true;
      }
    }
  }
});
</script>
